<template>
  <div class="body-bg">
 <el-form class="drawer-multiColumn-form" label-width="100px">
        <el-form-item label="MD5 KEY :">
          <!-- <el-button type="primary" icon="download" @click="downloadTemp"
            >点击下载</el-button
          > -->
            <el-input
          style="width: 200px; margin-right: 10px"
          placeholder="请输入"
          v-model="importKey"
          size="small"
          clearable
        />
        </el-form-item>
        <el-form-item label="文件上传:">
          <el-upload
            action=""
            class="upload-demo"
            drag
            accept=".xlsx, .xls"
            :on-exceed="exceedFile"
            :on-error="handleError"
            :on-success="handleSuccess"
            :http-request="uploadExcel"
            :before-upload="beforeUPload"
            :show-file-list="true"
            :limit="excelLimit">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text" style="width: 360px;">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
  
  </div>
 
</template>

<script lang='ts'>
import { defineComponent, onMounted,ref } from 'vue'
import { useMessage } from 'naive-ui'
import { IconTutorial } from '@/icons'
import { useRouter } from 'vue-router'
import { importData,saveClPvUv } from '@/api/user'

export default defineComponent({
  name: 'ImportData',
  components: {
    IconTutorial,
  },
  setup() {
    const nMessage = useMessage()
    const router = useRouter()
    const importKey = ref('')
    onMounted(() => {
      // nMessage.warning('移动端建设中。。。')
     savePvUv();
    })

        // 记录pvuv
    const savePvUv = () => {
        const url = "https://www.cljj.wiki/#/importData";
        saveClPvUv(url).then();
    }

    // 文件上传之前判断
const beforeUPload = (file: any) => {
  const isExcel =
    file.type === 'application/vnd.ms-excel' ||
    file.type ===
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  const isLt2M = file.size / 1024 / 1024 < 20;
  if (!isExcel)
  nMessage.warning('上传文件只能是 xls格式！')
  if (!isLt2M)
  nMessage.warning('上传文件大小不能超过 20MB!')
  return isExcel && isLt2M;
};
// 文件数超出提示
const exceedFile = () => {
  nMessage.warning('最多只能上传一个文件！')
};
// 上传错误提示
const handleError = () => {
  nMessage.warning('导入数据失败，请您重新上传！')
};

//上传成功提示
const handleSuccess = () => {
  nMessage.success('导入数据成功！')
};

// 文件上传
const uploadExcel = async (param: any) => {
  console.log(1)
  let fileFormData = new FormData();
  fileFormData.append('file', param.file, param.file.name);
  fileFormData.append('importKey',importKey.value);
  console.log(fileFormData)
  const res =await importData(fileFormData);
  console.log(res.data.code !== 'CLJJ-0000')
  if (res.data.code !== 'CLJJ-0000') return  param.onError();
};
  return {
      beforeUPload,
      exceedFile,
      handleError,
      handleSuccess,
      uploadExcel,
      importKey
    }
},
})
</script>
<style>

.body-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.contor{
  color: #a1a3a6;
    margin-left: 14px
}

</style>
